<template>
<div class="md-layout md-gutter md-alignment-top-center">
  <!--full-control class="md-layout-item md-size-15"></full-control-->
  <div class="wrap wrapper md-layout-item md-size-75 md-xsmall-size-100 pt-6" v-viewer>
    <div class="item" v-for="(item, index) in pictuers" :class="{checked: item.checked}">
      <img :src="item.url + '/h200'"/>
      <div class="cover">
        <md-icon class="text-white">favorite</md-icon>{{item.like_count}}
        <span>{{ item.title ? item.title : item.created_at }}</span>
      </div>
    </div>
    <infinite-loading :identifier="$route.path" @infinite="loadPictuers">
      <span slot="no-more"></span>
      <span slot="spinner"></span>
      <span slot="no-results"></span>
      <span slot="error"></span>
    </infinite-loading>

  </div>
  <div class="loading" v-show="load">
    <!--md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner-->
    <div class="animate">
      <div class="red"></div>
      <div class="green"></div>
      <div class="yellow"></div>
      <div class="black"></div>
    </div>
    <p>正在努力加载...</p>
  </div>
  <top-tools v-if="checkedDataId.length > 0" :checkedData="checkedDataId" v-on:close="toptoolClose" v-on:msg="showMsg"></top-tools>
  <div id="view-pictuer"></div>
</div>
</template>

<script>
  import TopTools from '@/components/layouts/TopTools'
  import Viewer from 'viewerjs'
export default {
  name: 'Index',
  components: {
    TopTools
  },
  computed: {

  },
  watch: {
    '$route': 'loadInit'
  },
  updated() {

  },
  created() {
    this.loadPictuers(null)
  },
  data() {
    return {
      pictuers: [],
      load: false,
      page: 1,
      cate_name: 'nvsheng',
      showDialog: false,
      pictuer: {},
      dialogImg: {},
      mediaStyle: {
        width: '200px',
        height: '200px'
      },
      pictuer_id: 0,
      topTool: false,
      checkedDataId: [],
      infiniteId: +new Date()
    }
  },
  mounted(){
  },
  methods: {
    loadInit() {
      this.pictuers = []
      this.page = 1
      this.cate_name = this.$route.params.name
      this.$emit('reload')
      console.log('执行了初始化')
      this.loadPictuers(null)
    },
    loadPictuers($state) {
      //setTimeout(() => {
        this.load = true
        let _this = this
        this.$http.get('/pictuers', {
          params: {
            page: this.page,
            page_limit: 30,
            tags: this.$route.params.tag,
            type: this.$route.name,
            category: this.$route.params.category
          }
        }).then(({data}) => {
          this.load = false
          if (data.meta.hot_tags) {
            this.updateTags(data.meta.hot_tags)
          }

          if ((data.meta.pagination.total_pages - 1) > _this.page) {
            _this.page += 1
          } else {
            if($state) $state.complete()
          }
          if (data.data.length > 0) {
            _this.pictuers = _this.pictuers.concat(data.data);
            this.load = false
            if($state) $state.loaded()
            document.title = (data.meta.tag.seotitle === undefined) ? '头像阁 - 我的头像收藏夹(ง •̀_•́)ง' : data.meta.tag.seotitle + ' - 我的头像收藏夹(ง •̀_•́)ง'
          } else {
            if($state) $state.complete()
          }
        })
      //}, 500)
    },
    up() {
      this.$http.post('/likes/' + this.pictuer.id + '/pictuer')
      .catch(({status}) => {
        if (status === 429) this.$emit('show-msg', {info: '您的操作太快了，请稍候再试！'})
        else this.$emit('show-msg', {info: '登录后才可以点赞！'})
      })
    },
    showBigImg(item) {
      // 先将所有 style 设置为默认
      this.showDialog = true
      this.pictuer = item
    },
    showMsg(msg, type) {
      console.log('接收到了', msg)
      this.$emit('show-msg', msg)
    },
    checked(index) {
      this.$set(this.pictuers[index], 'checked', !this.pictuers[index] .checked);
      if (this.pictuers[index] .checked) this.checkedDataId.push(this.pictuers[index] .id)
      else {
        this.checkedDataId.forEach(  (item,i) => {
          if (item == this.pictuers[index] .id) {
            this.checkedDataId.splice(i, 1)
          }
        })

      }
      if(this.checkedDataId.length > 0) this.topTool = true
      else this.topTool = false
    },
    toptoolClose() {
      this.topTool = false
      this.removeCheckedDataId(0)
    },
    removeCheckedDataId(id) {
      if (id < 1) {
        this.checkedDataId = [];
        this.pictuers.map(function (item, index){
          return item['checked'] = false;
        })
      } else {
        // this.checkedDataId.remove()
      }
    },
    updateTags(tags) {
      this.$emit('updateTags', tags)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~vue-material/dist/theme/engine";
@import 'viewerjs/dist/viewer.css';
.md-layout.md-gutter {
  margin-left: 0;
  margin-right: 0;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
  margin-top: 2rem;
}
.md-icon.md-theme-default.md-icon-font.text-white {
  color: rgb(255, 255, 255);
  font-size: 1rem !important;
}
.item {
    display: flex;
    height: 200px;
    margin: 5px;
    flex-grow: 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,0);
    div {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1.5rem;
      background-color: rgba(0,0,0,.5);
      opacity: 0;
      bottom: -1.5rem;
      color: rgb(255, 255, 255);
      line-height: 1.5rem
    }
    &:hover {
      div {
        opacity: 1;
        transform: translateY(-1.5rem);
        transition: .3s;
      }
    }
    &.checked {
      border: 2px solid md-get-palette-color(blue, A200);
    }
}
  .item img {
    flex-grow: 1;
    height: 200px;
    object-fit: cover;
    transition: .3s;
  }
.wrap:after{
  display: block;
  content: '';
  flex-grow: 9999;
}
@media screen and (max-width: 600px) {
  .item {
      margin: 0;
      .cover {
        bottom: 0;
        opacity: 1;
      }
  }
}
.md-card-media-actions .md-card-media {
  max-width: 75vw;
  max-height: 75vh;
  img {
    height: auto;
    max-height: 100%;
    width: 100%;
  }
}
.loading {
  width: 280px;
  height: 64px;
  background-color: rgba(255, 255, 255, .5);
  position: fixed;
  bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items:center;
  p {
    padding-left: .5rem;
    align-items:center;
  }
  .animate {
    height: 2.4rem;
    width: 2.4rem;
    margin-top: .5rem;
    div {
      border: 0;
      margin: 0;
      width: .8rem;
      height: .8rem;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
    }
    .green {
      background-color: md-get-palette-color(blue, A200);
      animation-delay: -1.5s;
    }
    .red {
      background-color: md-get-palette-color(pink, A200);
      animation-delay: -1s;
    }
    .yellow {
      background-color: md-get-palette-color(yellow, A200);
      animation-delay: -0.5s;
    }
    .black {
      background-color: md-get-palette-color(black, A200);
    }
  }

}
@keyframes k-loadingO {
  0%,100% {
  transform:translate(0)
}
25% {
  transform:translate(150%)
}
50% {
  transform:translate(150%,150%)
}
75% {
  transform:translate(0,150%)
}
}
</style>
